import React,{Component} from 'react'

import {
    Text,
    Image,
    Flatlist,
    View,
    Dimensions,
    StyleSheet,
}from 'react-native';

const {width,height} = Dimensions.get('window')

const imgwidth=width*4/25
const rightwidth=width*16/25

const styles=StyleSheet.create({
    single:{
        width:'100%',
    },
    types:{
        backgroundColor:'white',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between'
    },
    singleimg:{
        width:imgwidth,
        paddingTop:'20%',
    },
    singleright:{
        width:rightwidth,
        height:imgwidth,
        flexDirection:'column',
        justifyContent:'space-around',
    },
    typetext:{

    }
})


const Diancanitem = (props) => {
    const {list } =props.list
    return (
        <View>
    <Flatlist
      style={styles.single}
      numColumns={1}
      keyExtractor={(item, index) => index}
      data={props.list}
      renderItem={({item}) => {
                return (
                  <View
                   style={styles.types}
                   >
                   <Image
                   source={require("../img/activity.png")}
                   style={styles.singleimg}
                   />
                   <View style={styles.singleright}>
                  <Text style={styles.typetext}>
                  {item.listName}
                  </Text>
                  <Text style={styles.typetext}>
                  {item.listin[0].price}
                  </Text>
                  </View>
                  </View>
            )
              }
              }
    />  
</View>
    );
}


export default Diancanitem